<template>
    <div class="main-box" v-if="isRouterAlive">
        <div class="box-title">

            <div class="title-text" @click="ii">

                <div class="text">用户名</div>
                <div class="text"></div>
                <div class="text"></div>
                <div class="text"></div>
                <div class="content-bt"></div>
            </div>
        </div>
        <div class="box-content" v-for="item in msglist" :key="item.id">
            <div class="content-msg" v-if="item.tip == 'n'">
                <div class="text">{{ item.username }}</div>
                <div class="text"></div>
                <div class="text"></div>
                <div class="text"></div>
                <div class="content-bt">
                    <div class="bt" @click="this.opbt = !this.opbt,open(item.id,item.username)" >查看</div>
                    <div class="bt" @click="userdelete(item.id)">删除</div>
                </div>
            </div>
        </div>
        <div v-if="this.opbt" class="mengceng">
            <div class="submitfrom">
                    <div class="from-box" v-for="(item,index) in this.username.list" :key="index">
                    <div class="img">
                        <img class="img-touxiang" :src="item.img" alt="">
                        <div class="guanbi" @click="this.opbt = !this.opbt"><img src="/static/img/guanbi.svg" alt=""></div>
                    </div>
                    <div class="msg">
                        <div class="msg-left">
                            <div>
                                <div class="msg-title">企业名称</div>
                                <div>{{ item.qyname }}</div>
                            </div>
                            <div>
                                <div class="msg-title">运营者姓名</div>
                                <div>{{ item.yyname }}</div>
                            </div>
                            <div>
                                <div class="msg-title">手机号</div>
                                <div>{{ item.phone }}</div>
                            </div>
                            <div>
                                <div class="msg-title">联系邮箱</div>
                                <div>{{ item.email }}</div>
                            </div>
                            <div>
                                <div class="msg-title">企业类型</div>
                                <div>{{ item.classes }}</div>
                            </div>
                            <div>
                                <div><span class="msg-title">注册资金</span><span class="msg-mn">{{ item.capital }}万</span></div>
                            </div>
                        </div>
                        <div class="msg-right">
                            <div>
                                <div class="msg-title">营业执照</div>
                                <div class="right-img"><img :src="item.img" alt=""></div>
                            </div>
                            <div>
                                <div class="msg-title">统一社会信用代码</div>
                                <div>{{ item.creditcode }}</div>
                            </div>
                        </div>
                    </div>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(item.qyname,
                        item.yyname,item.phone,item.email,item.classes,item.capital,item.creditcode)">通过</el-button>
                        <el-button @click="resetForm(item.id)">忽略</el-button>
                    </el-form-item>
                </div>
                    

            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { CLOSING } from 'ws'

export default {

  props: ['msglist'],

  data () {
    return {
      isRouterAlive: true,
      opbt: false,
      user:'',
      username: {
        list: [{
        }]
      }
    }
  },
  methods: {
    open (id,username) {
        this.user = username
      axios.get('/api/qiyeshenheid?id=' + id).then(res =>{
        this.username.list = res.data
      }).then(res => {
        // axios.post('/api/qiyeshenhetip?id=' + id).then(res =>{

        // })
      })
    },
    submitForm (qyname,yyname,phone,email,classes,capital,creditcode) {
        const username = this.user
        // console.log(u);
        axios.post('/api/qiyeshenpass?qyname='+qyname+'&yyname='+yyname
        +'&phone='+phone+'&email='+email+'&classes='+classes
        +'&capital='+capital+'&creditcode='+creditcode+'&username='+username)
        .then(res =>{
            console.log(res.data);
        })
        
    },
    resetForm (id) {
        axios.post('/api/qiyeshenhetip?id=' + id).then(res =>{
            
        })
    },
    userdelete (id) {
      axios.delete('/api/qiyeshenhedelete?id=' + id).then(ref => {

      })
    },

  }

}

</script>

<style scoped lang="scss">
.main-box {
    // height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;

    .box-title {
        height: 30px;
        position: sticky;
        top: 0;
        background-color: #cccccc;
        .title-text{
            height: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .content-bt{
                width: 140px;
            }

        }
    }
    .text{
        width: 100px;
        text-align: center;
    }
    .box-content {
        width: 100%;
        background-color: #ffffff;
        .content-msg{
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom:1px solid #cccccc ;
        }
        .content-msg:hover{
        background-color: #0099CC;
        }
        .content-bt{
            width: 140px;
            display: flex;

            .bt{
                height: 25px;
                width: 50px;
                margin: 0 10px;
                text-align: center;
                line-height: 25px;
                border-radius: 20px;
                background-color: #99CCCC;
                cursor: pointer;
            }
        }
    }
    .mengceng{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        min-width: 1000px;
        background-color:rgba($color: #000000, $alpha: 0.3);
        z-index: 99;
    }
    .submitfrom{
        width: 80%;
        height: 500px;
        position: relative;
        top:100px;
        left: 100px;
        background-color: #ffffff;
        min-width: 800px;
        padding: 20px;
        z-index: 100;
        border-radius: 20px;
        .from-box{
            display: flex;
            flex-direction: column;
        }
        .img{
            height: 100%;
            width: 100%;
           display: flex;
           justify-content: space-between;
           padding: 10px 0;
           border-bottom: 1px solid #cccccc;
           .img-touxiang{
            width: 100px;
            height: 100px;
            border-radius: 50%;
           }
           .guanbi{
            width: 50px;
            height: 50px;
            cursor: pointer;
            img{
                width: 50px;
                height: 50px;
            }
           }
        }

        .msg{
            margin-top: 20px;
            display: flex;
            color: #666666;
            .msg-left,.msg-right{
                flex: 1;
            }
        }
        .right-img{
            width: 200px;
            height: 100px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .msg-title{
            color: #0099CC;
            font-size: 18px;
        }
        .msg-mn{
            line-height: 30px;
            margin-left: 20px;
        }
    }

    .el-input{
        width: 200px;

    }
    .el-form-item{
        float: right;
    }

}
</style>